<template>
  <div class="category-list">
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="8">
        <el-input v-model="categoryName" placeholder="请输入分类名称" />
      </el-col>
      <el-col :span="6">
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </el-col>
    </el-row>

    <el-table :data="categories" style="width: 100%">
      <el-table-column prop="category_name" label="分类名称" width="200"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalItems"
      :current-page.sync="currentPage"
      @current-change="handlePageChange"
    ></el-pagination>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import {queryCategory} from '@/api/category.js'
// 假设的数据源
const categories = ref([
  { id: 1, name: '口腔护理', createTime: '2021-07-19 14:30:29' },
  { id: 2, name: '杀菌消毒', createTime: '2021-07-19 14:30:29' },
  { id: 3, name: '预防感染', createTime: '2021-07-19 14:30:29' },
  { id: 4, name: '诊所整理', createTime: '2021-07-19 14:30:29' },
  { id: 5, name: '修复填充', createTime: '2021-07-19 14:30:29' }
]);

const categoryName = ref('');
const totalItems = ref(100);
const currentPage = ref(1);
/**
 * 初始化页面数据
 */
onMounted(() => {
  getCategory()
});
const handleSearch = () => {
  console.log('Search:', categoryName.value);
};
async function getCategory() {
  const res = await queryCategory()
  categories.value = res.data
  console.log(res)
}
const handleReset = () => {
  categoryName.value = '';
};

const handleAdd = () => {
  console.log('Add');
};

const handleEdit = (index, row) => {
  console.log('Edit:', index, row);
};

const handleDelete = (index, row) => {
  console.log('Delete:', index, row);
};

const handlePageChange = (page) => {
  currentPage.value = page;
};
</script>

<style scoped>
.category-list {
  padding: 20px;
}

.el-row {
  margin-bottom: 20px;
}
</style>
